<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<script src="{$Think.const.MY_CONST_VAL}Admin/js/jquery-3.1.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="<{$Think.const.MY_CONST_VAL}>Admin/js/jqueryui/jquery-ui.min.css" />
 <script src="<{$Think.const.MY_CONST_VAL}>Admin/js/jqueryui/jquery-ui.min.js"></script>
 <link type="text/css" rel="stylesheet" href="<{$Think.const.MY_CONST_VAL}>Admin/css/H-ui.css"/>
<link type="text/css" rel="stylesheet" href="<{$Think.const.MY_CONST_VAL}>Admin/css/H-ui.admin.css"/>
<link type="text/css" rel="stylesheet" href="<{$Think.const.MY_CONST_VAL}>Admin/css/font-awesome.min.css"/>
 </head>
<style>
	.msg{background-color:#99cc33;padding:20px;width:200px;position:absolute;left:50%;margin-left:-100px;display:none;}

	.confirm{background-color:#99cc33;padding:20px;width:200px;position:absolute;left:50%;margin-left:-100px;top:50px;display:none;}

	.v-edit{background-color:#99cc33;padding:20px;width:300px;position:absolute;left:50%;margin-left:-150px;display:none;}

</style>
 <body>
 <div class="msg">hello</div>
<form class="v-edit" action="">
	<input type="text" value="1" name="uid"><br>
	用户名<input name="uname" type="text" value=""><br>
	手机<input name="tel" type="text"><br>
	邮箱<input name="email" type="text"><br>
	<input type="button" value="修改">
	<input type="button" value="取消"><br>
</form>
 
 

<table class="table table-border table-bordered table-bg">

<tr >
		<td colspan="7">职位表</td>
	
	</tr>
	<tr class="text-c">
		<td>Id</td>
		<td>职位名</td>
		<td>权限</td>
		<td>操作</td>
		
	</tr>
	
	<volist name="info" id="vo">


		<tr class="text-c" id="user_{$vo.zid}">
		<td><{$vo['zid']}></td>
		<td><{$vo['zname']}></td>
		<td>
	 <foreach name="data" item="v" >
	<in name="v.id" value="$vo['zquan']">
	<{$v['name']}>/
	</in>
	  </foreach>
		
		</td>
		<td>
		
		<span name="edit" data-id="<{$vo['zid']}>">编辑</span>
		<span  name="del" data-id="<{$vo['zid']}>">删除</span>
		</td>
		
	</tr>
	</volist>
	

	
	
	
</table>

<script>
//全选反选

	$(function(){

		  //自动完成
		  $( "#birds" ).autocomplete({
		    source: "{:U('search')}",
		  });
		
		//
		$('#s_all').click(function(){
			$('.c1').prop('checked',$(this).prop('checked'));	
		});
		
		$('#f_all').click(function(){
			$('.c1').map(function(k,v){
				var flag = $(v).prop('checked');
				$(v).prop('checked',!flag);
			});			
		});
		
		//
		$('[name="del"]').click(function(){
			var uid = $(this).attr('data-id');
			$("<div>删除将无法恢复</div>").dialog({
				title:'确定删除吗',
				modal: true,
				buttons: {
			        "确定删除": function() {	
			        	$.get('{:U("del")}',{uid:uid},function(data){
			    			if(data.status){				
			    				$('#user_'+uid).remove();
			    				$('.msg').text(data.msg);
			    				$('.msg').slideDown('fast');
			    				setTimeout(function(){$('.msg').slideUp('fast');},1000);				
			    			}else{
			    				$('#user_'+uid+' [name="del"]').val('删除');
			    				
			    				$('.msg').text(data.msg);
			    				$('.msg').slideDown('fast');
			    				setTimeout(function(){$('.msg').slideUp('fast');},1000);
			    			}			
			    		},'json');
			        		   	
			          $( this ).dialog( "close" );
			        },
			        "取消": function() {
				          $( this ).dialog( "close" );
				        },
				},     
			});		
		});
		
		//确认修改
		
		$('[name="edit"]').click(function(){
			//获取uid
			var uid = $(this).attr('data-id');
			
			$('.v-edit [name="uid"]').val(uid);

			//查询当前记录
			
			$.get('{:U("query")}',{uid:uid},function(data){
				$('.v-edit [name="uname"]').val(data.uname);
				$('.v-edit [name="email"]').val(data.email);
				$('.v-edit [name="tel"]').val(data.mobile);
			},'json');

			$('.v-edit').show();
			//确认修改
			$('.v-edit :button:eq(0)').click(function(){
				var uname = $('.v-edit [name="uname"]').val();
				var uid = $('.v-edit [name="uid"]').val();
				var email =	$('.v-edit [name="email"]').val();
				var tel = $('.v-edit [name="tel"]').val();

				
				$.post('{:U("edit")}',{id:uid,uname:uname,email:email,mobile:tel},function(data){

					
				$('#user_'+uid+' td:eq(1)').text(uname);
				$('#user_'+uid+' td:eq(5)').text(tel);
				$('#user_'+uid+' td:eq(6)').text(email);


					$('.msg').text(data.msg);
					$('.msg').slideDown('fast');
					setTimeout(function(){$('.msg').slideUp('fast');},1000);	
					
					$('.v-edit').hide();
				},'json');
				
			});
			$('.v-edit :button:eq(1)').click(function(){
				$('.v-edit').hide();
			});
			
			
		});
		
		
	
});



	</script>

 </body>
</html>